<template>
    <div class="meal">
        <div class="img">
            <img :src="meal.img" :alt="meal.title">
        </div>
        <div class="info">
            <div class="desc">
                <h2>{{ meal.title }}</h2>
                <p v-show="desc">{{ meal.desc }}</p>
            </div>
            <div class="price-btn">
                <span class="price">{{ meal.price }}</span>
                <Counter :meal="meal"></Counter>
            </div>
        </div>
    </div>
</template>

<script setup lang="js">
import Counter from '@/components/UI/Counter.vue';

const { meal,desc } = defineProps(["meal","desc"])
</script>

<style lang="css" scoped>
.meal {
    height: 280rem;
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    padding: 0 20rem;
}

.img {
    width: 200rem;
}

.info{
    width: 450rem;
    margin-left: 20rem;
}
.info h2{
    color: #000;
    font-size: 30rem;
    font-weight:normal;
}

.info p{
    color: #9f9f9f;
    font-size: 24rem;
}

.price-btn{
    display: flex;
    margin-top: 40rem;
    justify-content: space-between;
}

.price{
    font-size: 30rem;
    font-weight: bold;
}
.price::before{
    content: "￥";
}
</style>